---
import HeroCard from "../components/HeroCard.astro";
import Layout from "../layouts/Layout.astro";
import ContentCard from "../components/ContentCard.astro";
import FeatureCard from "../components/FeatureCard.astro";
import responsiveIcon from "../assets/astro.svg";
import { Icon } from "astro-icon/components";
import BottomCard from "../components/BottomCard.astro"
---
<Layout title="About">
  <HeroCard
    bgText="About"
    title="About Ice"
    tooltipText="这是一个现代、响应式、功能丰富的 Astro 博客主题，支持暗黑/明亮模式和自定义选项" />
    <Fragment slot="main">
    <ContentCard>
    <section class="profile-card">
      <div class="profile-avatar">
        <img src="https://api.dicebear.com/7.x/bottts/svg?seed=Ice&backgroundColor=00acd7" alt="头像" width="120" height="120" />
      </div>
      <div class="profile-info">
        <h1>Ice</h1>
        <p class="subtitle">Developer & Open-Source Enthusiast</p>
        <div class="social-links">
          <a href="#"><span class="icon-github"></span> GitHub</a>
          <a href="#"><span class="icon-twitter"></span> Twitter</a>
          <a href="#"><span class="icon-mail"></span> Email</a>
        </div>
        <p class="profile-bio">
          Hello! I'm Ice, a passionate developer focused on creating elegant, responsive, and efficient web applications. I'm the creator of the Frosti blog theme, a modern Astro-based theme for content creators. I love contributing to open-source projects and building tools that help others create beautiful digital experiences.
        </p>
      </div>
    </section>
    <section class="preson-hobby">
          <h2>✨个人喜好</h2>
          <div class="feature">
            <FeatureCard
            title="Responsive Design" 
            description="Fully responsive design that looks great on all devices from mobile to desktop"
            iconSrc={responsiveIcon}
            />
            <FeatureCard
            title="Responsive Design" 
            description="Fully responsive design that looks great on all devices from mobile to desktop"
            iconSrc={responsiveIcon}
            />
            <FeatureCard
            title="Responsive Design" 
            description="Fully responsive design that looks great on all devices from mobile to desktop"
            iconSrc={responsiveIcon}
            />
            <FeatureCard
            title="Responsive Design" 
            description="Fully responsive design that looks great on all devices from mobile to desktop"
            iconSrc={responsiveIcon}
            />
            <FeatureCard
            title="Responsive Design" 
            description="Fully responsive design that looks great on all devices from mobile to desktop"
            iconSrc={responsiveIcon}
            />
            <FeatureCard
            title="Responsive Design" 
            description="Fully responsive design that looks great on all devices from mobile to desktop"
            iconSrc={responsiveIcon}
            />
          </div>
        </div>
        <section class="Activity">
          <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
            <Icon name="lucide:activity" class="w-6 h-6 text-primary" />
            <span>Recent Activity</span>
          </h2>
          <div class="timeline-card">
            <div class="timeline-steps">
              <div class="timeline-step">
                <div class="step-circle">1</div>
                <div class="Content">
                <div class="step-data">January 2024</div>
                <div class="step-title">open</div>
                <div class="step-desc">Contro</div>
                </div>
              </div>
                <div class="timeline-step">
                  <div class="step-circle">1</div>
                  <div class="Content">
                  <div class="step-data">January 2024</div>
                  <div class="step-title">open</div>
                  <div class="step-desc">Contro</div>
                  </div>
                </div>
                  <div class="timeline-step">
                    <div class="step-circle">1</div>
                    <div class="Content">
                    <div class="step-data">January 2024</div>
                    <div class="step-title">open</div>
                    <div class="step-desc">Contro</div>
                    </div>
                  </div>
                  <div class="timeline-step">
                    <div class="step-circle">1</div>
                    <div class="Content">
                    <div class="step-data">January 2024</div>
                    <div class="step-title">open</div>
                    <div class="step-desc">Contro</div>
                    </div>
                  </div>
            </div>
          </div>
    </section>
  </ContentCard>
    </Fragment>
    <Fragment slot="footer">  
  <BottomCard>
  </BottomCard>
    </Fragment>
</Layout>


<style>
.profile-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.profile-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  border: 3px solid #2563eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  background: #fff;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-info h1 {
  font-size: 2.3rem;
  font-weight: bold;
  color: #1a1a1a;
  margin: 0 0 0.3rem 0;
}

.subtitle {
  color: #5a6473;
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.social-links a {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #dbeafe;
  border-radius: 8px;
  padding: 0.4rem 1.1rem;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.18s, border 0.18s;
}
.social-links a:hover {
  background: #e0edff;
  border-color: #2563eb;
}

.profile-bio {
  color: #444;
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0;
}
.feature {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 18px;
    }
.timelined-card{
  background: #f4f8ff;
  border-radius: 18px;
  padding: 32px 24px 24px 24px;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
  max-width: 1000px;
  margin: 0 auto;
  overflow: visible;
}
.timeline-steps {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
  overflow-x: auto;
  width: 100%;
  padding-bottom: 12px; 
}
.timeline-step {
  min-width: 220px;
  max-width: 320px;
  background: transparent;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.step-circle {
  width: 40px;
  height: 40px;
  background: #1677ff;
  color: #fff;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px 0 rgba(22,119,255,0.10);
}
.step-date {
  color: #7b8ba3;
  font-size: 1rem;
  margin-bottom: 4px;
}
.step-title {
  font-size: 1.18rem;
  font-weight: bold;
  color: #2d3a4a;
  margin-bottom: 6px;
}
.step-desc {
  color: #4c545f;
  font-size: 1rem;
  line-height: 1.6;
}
.timeline-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}


@media (max-width: 800px) {
  .timeline-steps {
    gap: 8px;
  }
  .timeline-step {
    min-width: 180px;
    max-width: 240px;
  }
}
.Content{
  flex:1;
  margin-left:20px;
}
/* 整个滚动条轨道 */
.timeline-steps::-webkit-scrollbar {
  height: 20px;
}

/* 滚动条轨道背景 */
.timeline-steps::-webkit-scrollbar-track {
  background: #f1f5fe; /* 浅蓝色背景 */
  border-radius: 10px;
}

/* 滚动条滑块 */
.timeline-steps::-webkit-scrollbar-thumb {
  background: #1677ff; /* 主题蓝色 */
  border-radius: 10px;
  border: 2px solid #f1f5fe; /* 与轨道同色的边框 */
}

/* 鼠标悬停时滑块样式 */
.timeline-steps::-webkit-scrollbar-thumb:hover {
  background: #1259c4; /* 深蓝色 */
}

  </style>